<route lang="json5">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '我的资料',
  },
}
</route>

<template>
  <view class="content-warp">
    <view class="content">
      <view class="content-cell">
        <view class="left">姓名</view>
        <view class="right">{{ user.name }}</view>
      </view>
      <view class="content-cell">
        <view class="left">手机号</view>
        <view class="right">{{ user.mobile }}</view>
      </view>
      <view class="content-cell">
        <view class="left">服务类型</view>
        <view class="right w-[50%]">{{ serviceType }}</view>
      </view>
      <view class="content-cell">
        <view class="left">地址</view>
        <view class="right">{{ user.address }}</view>
      </view>
      <view class="content-cell">
        <view class="left">人员类型</view>
        <view class="right">{{ user.type === '1' ? '个人' : '个体' }}</view>
      </view>
      <view class="content-cell-image">
        <view class="left">身份证号</view>
        <view class="right-image">
          <image :src="image_path_all" mode="aspectFill" />
        </view>
      </view>
    </view>
    <buttonBtn @btnClick="toUpdate">修改资料</buttonBtn>
  </view>
</template>

<script setup lang="ts">
import { getServiceType, getUserInfo } from '@/service/user'
import { useStorage } from '@/utils/storage'
const { set } = useStorage()
function toUpdate() {
  console.log('修改')
  uni.navigateTo({
    url: '/pages/user/updateInfo/index',
  })
}
// 用户信息
// eslint-disable-next-line camelcase
const image_path_all = ref<string>('')
const user = ref<RUserInfo>({})
const getInfo = async () => {
  const res: IResData<RUserInfo> = await getUserInfo()
  if (res.code === 1) {
    user.value = res.data
    // eslint-disable-next-line camelcase
    image_path_all.value = `${import.meta.env.VITE_SERVER_BASEURL}${res.data.image_path}`
    set('userInfo', res.data)
  }
}
// 服务类型
const serviceTypes = ref<RServiceType[]>([])
const getServiceTypes = async () => {
  const res: IResData<RServiceType[]> = await getServiceType()
  if (res.code === 1) {
    serviceTypes.value = res.data
  }
}
const serviceType = computed(() => {
  let result = ''
  const RServiceType = user.value.service_type ? JSON.parse(user.value.service_type) : []
  result = serviceTypes.value
    .filter((item) => RServiceType.includes(item.id))
    .map((item) => item.title)
    .join(' ')
  return result
})
onLoad(async () => {
  await getServiceTypes()
  await getInfo()
})
</script>

<style scoped lang="scss">
.content-warp {
  opacity: 1;
  background: #f7f7f7;
  padding: 15px;
  min-height: calc(100vh - 44px);
  .content {
    padding: 15px;
    border-radius: 10px;
    opacity: 1;
    background: #ffffff;
    .content-cell-image {
      padding: 15px 0px;
      font-family: Source Han Sans;
      font-size: 16px;
      font-weight: 350;
      line-height: 24px;
      letter-spacing: 0px;
      color: #666666;
      .left {
        margin-bottom: 10px;
      }
      .right-image {
        height: 158px;
        border-radius: 8px;
        overflow: hidden;
        opacity: 1;
        background: #f1f1f1;
      }
    }
    .content-cell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 0px;
      border-bottom: 1px solid #f7f7f7;
      .left {
        font-family: Source Han Sans;
        font-size: 16px;
        font-weight: 350;
        line-height: 24px;
        text-align: center;
        display: flex;
        align-items: center;
        letter-spacing: 0px;
        font-variation-settings: 'opsz' auto;
        color: #666666;
        white-space: nowrap;
      }
      .right {
        font-family: Source Han Sans;
        font-size: 15px;
        font-weight: 350;
        line-height: 24px;
        text-align: right;
        display: flex;
        align-items: center;
        letter-spacing: 0px;
        font-variation-settings: 'opsz' auto;
        color: #333333;
      }
    }
  }
}
</style>
